<template>
  <div class="button-group">
    <button
        :class="{ active: selectedButton === '病房分布' }"
        @click="selectButton('病房分布')"
    >
      房间-病房分布
    </button>
    <button
        :class="{ active: selectedButton === '功能分类' }"
        @click="selectButton('功能分类')"
    >
      房间功能分类
    </button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  props: {
    modelValue: {
      type: String,
      default: '病房分布'
    }
  },
  setup(props, { emit }) {
    const selectedButton = ref(props.modelValue);

    const selectButton = (button) => {
      selectedButton.value = button;
      emit('update:modelValue', button);
    };

    watch(() => props.modelValue, (newVal) => {
      selectedButton.value = newVal;
    });

    return {
      selectedButton,
      selectButton
    };
  }
};
</script>

<style scoped lang="scss">
.button-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

button {
  background-size: cover;
  background-position: center;
  border: none;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
  transition: background-image 0.3s ease;
  background-color: transparent; /* Ensure the background is transparent */
  background-image: none; /* No image by default */
}

button.active {
  background-image: url('/imgs/hos/YW/编组 2.png'); /* Show image when active */
  background-color: transparent; /* Ensure the background is transparent */
}
</style>